<template>
    <view class="">
        <CMXChild @add="onClick" @add2="onClick2" @add3="onClick3" @change="onChange"></CMXChild>
		<view class="box" :style="{background:color}">
			num:{{num}}
		</view>
		<view class="box" :style="{background:color2}">
			按钮2控制
		</view>
		<view class="box" :style="{background:color3}">
			按钮3控制
		</view>
    </view>
</template>

<script setup>
import { ref } from 'vue';

	const num = ref(0.00)
	const color = ref('#ccc')
	const color2 = ref('#ccc')
	const color3 = ref('#ccc')
    function onClick(x) {
		num.value = x;
		color.value = '#' + String(x).substring(3,6);
		console.log(color.value)
	}
	function onClick2(e) {
		color2.value = '#' + String(e).substring(3,6);
	}
	function onClick3(e) {
		color3.value = '#' + String(e).substring(3,6);
	}
	function onChange(e) {
		console.log(e);
	}
</script>

<style lang="scss" scoped>
.box {
	height: 150px;
	width: 150px;
}
</style>
